<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<!--
    1.school组件本质上是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
    2.我们只需要写<school/>或<school><school/>,Vue 会帮我们解析创建school组件的实例对象
    即Vue帮我们执行的new VueComponent（option）
    3.每次调用new VueComponent（option），会返回一个新的对象
    4.关于this指向
        组件配置中
            data中函数，methods中函数，watch中函数，computed中的函数，this是VueComponent的实例对象
        new Vue(option)
            data中函数，methods中函数，watch中函数，computed中的函数，this是Vm的实例对象
    5.  VueComponent的实例对象简称VC
        VueComponent的实例对象简称VM
-->
<body>
<div id="root">

</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    //第一步创建school组件
    const school = {
        // el:'#root', // 不能写el
        template:`
            <div>
                <h2>{{schoolName}}</h2>
                <h2>{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
        `,
        data(){
            return {
                schoolName:"minda",
                address:"wuhan",
            }
        },
        methods:{
            showName(){
                alert("message");
            }
        },
    }
    // 第三步全局注册
    const vm = new Vue({
        template:`
            <div>
                <school></school>
            </div>
        `,
        el:'#root',
        //第二部注册组件
        components:{
            school:school,
        },
    })
</script>
</body>
</html>